Flutter中實現類物理特性動畫的重要概念和組件:
1.AnimationController
:AnimationController
用於控制動畫的進度。用於設置動畫的持續時間、開始和停止動畫等。
2.Tween
:Tween 用於定義動畫的開始值和結束值。Flutter的動畫通常在一個數值範圍內進行,會使用 Tween 來指定這個範圍。
3.CurvedAnimation
:CurvedAnimation
用於定義動畫的時間曲線,例如彈跳效果。
下列是一個實現點擊按鈕產生彈跳動畫得實例
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: BouncingButtonDemo(),
);
}
}
class BouncingButtonDemo extends StatefulWidget {
@override
_BouncingButtonDemoState createState() => _BouncingButtonDemoState();
}
class _BouncingButtonDemoState extends State<BouncingButtonDemo>
with SingleTickerProviderStateMixin {
late AnimationController _controller; //聲明變數_controller
late Animation<double> _animation; //聲明變數_animation
@override
void initState() {
super.initState();
// 初始化動畫控制器
_controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 500), // 設定動畫持續時間為500毫秒
);
_animation = Tween<double>(
begin: 1.0, // 動畫起始值為 1.0
end: 1.2, // 動畫結束值為 1.2,按鈕將稍微變大
).animate(
CurvedAnimation(
parent: _controller, // 將這個動畫與 _controller 相關聯
curve: Curves.elasticOut, // 使用彈性曲線,創建彈跳效果
),
);
}
// 按鈕按下時觸發的函數
void _onButtonPressed() {
if (_controller.status == AnimationStatus.completed) {
_controller.reverse();
} else {
_controller.forward();
}
}
@override
void dispose() {
// 釋放動畫控制器
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('彈跳動畫按鈕示例'),
),
body: Center(
child: GestureDetector(
onTap: _onButtonPressed,
child: ScaleTransition(
scale: _animation,
child: Container(
width: 100.0,
height: 40.0,
color: Colors.blue,
alignment: Alignment.center,
child: Text(
'點我彈跳',
style: TextStyle(
color: Colors.white,
),
),
),
),
),
),
);
}
}